const THEME_KEY = 'CUR_THEME'
let style = `.el-button{
      border-radius: 2px;
    }
    .el-button--default:focus, .el-button--default:hover{ 
    color: {primaryBtnHover};
      border-color: {primaryBtnHover};
      background-color: #ffffff;
    }
    .el-button--primary { 
    color: #fff;
      background-color: {primaryBtn};
      border-color: {primaryBtn};
    }
    .el-button--primary:focus, .el-button--primary:hover{
      background: {primaryBtnHover};
      border-color: {primaryBtnHover};
      color: #fff;
    }
    .el-button--success {
    color: #fff;
      background-color: {successBtn};
      border-color: {successBtn};
    }
    .el-button--success:focus, .el-button--success:hover {
      background: {successBtnHover};
      border-color: {successBtnHover};
      color: #fff;
    }
    .el-button--info {
    color: #fff;
      background-color: {infoBtn};
      border-color: {infoBtn};
    }
    .el-button--info:focus, .el-button--info:hover {
      background: {infoBtnHover};
      border-color: {infoBtnHover};
      color: #fff;
    }
    .el-button--warning {
    color: #fff;
      background-color: {warningBtn};
      border-color: {warningBtn};
    }
    .el-button--warning:focus, .el-button--warning:hover {
      background: {warningBtnHover};
      border-color: {warningBtnHover};
      color: #fff;
    }
    .el-button--danger {
    color: #fff;
      background-color: {dangerBtn};
      border-color: {dangerBtn};
    }
    .el-button--danger:focus, .el-button--danger:hover {
      background: {dangerBtnHover};
      border-color: {dangerBtnHover};
      color: #fff;
    }
    .el-button--primary.is-plain {
      color: {primaryBtn};
      background: #ffffff;
      border-color: {primaryBtn};
    }
    .el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {
      background: {primaryBtnHover};
      border-color: {primaryBtnHover};
      color: #fff;
    }
    .el-button--success.is-plain {
      color: {successBtn};
      background: #ffffff;
      border-color: {successBtn};
    }
    .el-button--success.is-plain:focus, .el-button--success.is-plain:hover {
      background: {successBtnHover};
      border-color: {successBtnHover};
      color: #fff;
    }
    .el-button--info.is-plain {
      color: {infoBtn};
      background: #ffffff;
      border-color: {infoBtn};
    }
    .el-button--info.is-plain:focus, .el-button--info.is-plain:hover {
      background: {infoBtnHover};
      border-color: {infoBtnHover};
      color: #fff;
    }
    .el-button--warning.is-plain {
      color: warningBtn;
      background: #ffffff;
      border-color: {warningBtn};
    }
    .el-button--warning.is-plain:focus, .el-button--warning.is-plain:hover {
      background: {warningBtnHover};
      border-color: {warningBtnHover};
      color: #fff;
    }
    .el-button--danger.is-plain {
      color: {dangerBtn};
      background: #ffffff;
      border-color: {dangerBtn};
    }
    .el-button--danger.is-plain:focus, .el-button--danger.is-plain:hover {
      background: {dangerBtnHover};
      border-color: {dangerBtnHover};
      color: #fff;
    }
    .el-button.is-round {
      padding: 12px 23px;
    }
     .el-input__inner{
       border-radius: 2px;
     }
    .el-input__inner:focus{
      outline: none;
      border-color: {primaryBtn};
    }
    .el-textarea__inner{
      border-radius: 2px;
    }
    .el-textarea__inner:focus {
      outline: none;
      border-color: {primaryBtn};
    }
       .el-form-item__error{
         color: dangerBtn;
       }
    .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus {
      border-color: {dangerBtn};
    }
     .el-date-picker{
       width: 278px;
     }
    .el-date-picker__header{
      margin: 0;
      padding: 3px 12px;
      background: #F2F2F2;
    }
    .el-date-picker .el-picker-panel__content{
      width: 254px;
      margin: 0px 10px 10px 10px;
    }
    .el-date-table td{
      width: 32px;
      height: 24px;
      padding: 3px 0;
    }
    .el-date-table td div{
      height: 24px;
      padding: 0;
    }
    .el-date-table td span{
      border-radius: 2px;
      border: 1px solid transparent;
    }
    .el-date-table td.current span:hover {
      color: primaryBtn;
      border: 1px solid {primaryBtn};
    }
    .el-date-table td.available:hover{
      color: primaryBtn;
    }
    .el-date-table td.current:not(.disabled) span {
      color: #fff;
      background-color: {primaryBtn};
    }
    .el-date-table td.today span {
      color: primaryBtn;
      font-weight: 700;
    }
    .el-popper[x-placement^=bottom] .popper__arrow::after{
      border-bottom-color: #f2f2f2;
    }
    .el-date-picker__header-label{
      font-size: 14px;
    }
    .el-date-picker__header-label:hover{
      color: {primaryBtn};
    }
    .el-picker-panel__icon-btnL:hover{
      color: {primaryBtn};
    }
    .el-date-table th{
      padding: 0;
    }
       .el-date-range-picker {
         width: 535px;
       }
    .el-date-range-picker__content{
      padding: 0;
    }
    .el-date-range-picker__header{
      padding: 0 12px;
    }
    .el-date-range-picker table{
      padding: 4px 12px 8px 12px;
    }
    .el-date-range-picker__header{
      height: 34px;
      line-height: 34px;
    }
    .el-date-range-picker__header [class*=arrow-left],.el-date-range-picker__header [class*=arrow-right]{
      margin-top: 10px;
    }
    .el-date-table td.end-date span, .el-date-table td.start-date span {
      background-color: {primaryBtn};
    }
       .el-radio__input.is-checked .el-radio__inner {
         border-color: {primaryBtn};
         background: {primaryBtn};
       }
    .el-radio__input.is-checked+.el-radio__label {
      color: {primaryBtn};
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: {primaryBtn};
      border-color: {primaryBtn};
    }
    .el-checkbox__input.is-checked+.el-checkbox__label {
      color: {primaryBtn};
    }
       .el-tag{
         color: #FFFFFF;
         background-color: {primaryBtn};
       }
    .el-tag--success {
      background-color: {successBtn};
      border-color: {successBtn};
      color: #ffffff;
    }
    .el-tag--info {
      background-color: {infoBtn};
      border-color: {infoBtn};
      color: #ffffff;
    }
    .el-tag--warning {
      background-color: {warningBtn};
      border-color: {warningBtn};
      color: #ffffff;
    }
    .el-tag--danger {
      background-color: {dangerBtn};
      border-color: {dangerBtn};
      color: #ffffff;
    }
    .el-tag .el-icon-close{
      color: #ffffff;
    }
    .el-tag .el-icon-close:hover{
      background:{primaryBtnHover};
    }
    .el-tag--success .el-tag__close:hover{
      background: {successBtnHover};
    }
    .el-tag--info .el-tag__close:hover{
      background: {infoBtnHover};
    }
    .el-tag--warning .el-tag__close:hover{
      background: {warningBtnHover};
    }
    .el-tag--danger .el-tag__close:hover{
      background: {dangerBtnHover};
    }
       .el-tabs--card>.el-tabs__header .el-tabs__nav{
         background-color: #dddddd;
       }
    .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
      background: #FFFFFF;
    }
    .el-tabs__item{
      color: #666666;
    }
    .el-tabs--card>.el-tabs__header .el-tabs__item{
      border-left: 0;
    }
    .el-tabs__item.is-active{
      color: #333333;
    }
    .el-tabs__item:hover{
      color: #333333;
    }

     .el-pagination__total{
       float: right;
       margin-right: 20px;
       margin-left: 40px;
       line-height: 30px !important;
     }
    .el-pager li:hover{
      background: #F2F5FF;
    }
    .el-pager{
      margin-top: 3px;
    }
    .el-pager li{
      min-width: 26px;
      height: 24px;
      line-height: 24px;
    }
    .el-pagination__editor.el-input .el-input__inner{
      height: 26px;
    }
    .el-pagination .el-select .el-input .el-input__inner{
      height: 26px;
    }
    .nav-wrapper .nav-item.active{
      background-color: {primaryBtnHover}!important;
    }
    .router-link-active .el-menu-item{
      border-color: {primaryBtn}!important;
    }`
export const YE_DAO_THEME = {
  themeName: 'yedao',
  theme: {
    'primaryBtnHover': '#6589F2',
    'primaryBtn': '#5375D7',
    'successBtn': '#46CB78',
    'successBtnHover': '#62E192',

    'infoBtn': '#8E94A6',
    'infoBtnHover': '#9EA7BF',

    'warningBtn': '#F9A623',
    'warningBtnHover': '#FFC365',

    'dangerBtn': '#F74343',
    'dangerBtnHover': '#FF6969',
    'itemActive': '#DEF9FFFF'
  }
}
export const YE_DAO_THEME2 = {
  themeName: 'yedao2',
  theme: {
    'background': [{ el: '.el-header', className: 'yedao-bg' }, { el: '.sidebar-container', className: 'yedao-bg' }],
    'primaryBtn': '#00a8cc',
    'primaryBtnHover': '#3cc1dd',

    'successBtn': '#65BC50FF',
    'successBtnHover': '#81CB6FFF',

    'infoBtn': '#65AEECFF',
    'infoBtnHover': '#81BDF1FF',

    'warningBtn': '#E4B23BFF',
    'warningBtnHover': '#EFC560FF',

    'dangerBtn': '#F74343FF',
    'dangerBtnHover': '#FF6969FF',
    'itemActive': '#DEF9FFFF'
  }
}
export const YE_DAO_THEME3 = {
  themeName: 'ZGCtheme',
  theme: {
    'background': [{ el: '.el-header', className: 'ZGCtheme-bg' }, { el: '.sidebar-container', className: 'ZGCtheme-bg' }],
    'primaryBtn': '#005A9E',
    'primaryBtnHover': '#266B9E',

    'successBtn': '#65BC50',
    'successBtnHover': '#81C784',

    'infoBtn': '#03A9F4',
    'infoBtnHover': '#4FC3F7',

    'warningBtn': '#FFC107',
    'warningBtnHover': '#FFD54F',

    'dangerBtn': '#FF5722',
    'dangerBtnHover': '#FF8A65',
    'itemActive': '#DEF9FFFF'
  }
}
export function hasClass(ele, cls) {
  return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
}
export function addClass(ele, cls) {
  if (!hasClass(ele, cls)) ele.className += ' ' + cls
}
export function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {
    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
    ele.className = ele.className.replace(reg, ' ')
  }
}

export function getTheme(key = THEME_KEY) {
  return getStorage(key)
}
export function initTheme() {
  const theme = getTheme()
  if (getTheme()) {
    theme && setUpColor(theme)
  } else {
    setUpColor(YE_DAO_THEME3)
  }
}
export function setStorageTheme(theme) {
  theme = theme || {}
  setStorage(THEME_KEY, theme)
}
export function getStorage(key) {
  const themeStr = localStorage.getItem(key)
  if (!themeStr) {
    return null
  }
  try {
    return JSON.parse(themeStr)
  } catch (e) {
    console.log(e)
    return null
  }
}
export function setStorage(key, value) {
  const themeStr = JSON.stringify(value)
  localStorage.setItem(key, themeStr)
}
export function removeStoreTheme() {
  localStorage.removeItem(THEME_KEY)
}
export function removeTheme() {
  document.querySelector('#theme').innerText = ''
  delBackground()
  removeStoreTheme()
}
export function setUpBackground(arr = []) {
  for (let obj of arr) {
    const dom = document.querySelector(obj.el)
    addClass(dom, obj.className)
  }
}
export function delBackground() {
  // 获取localStorage存储的主题
  let theme = getTheme()
  // 判断localStorage中是否存在主题配置项，并且主题配置项设置了顶部和左侧特殊样式（即是否添加特殊class类）
  if (theme && theme.theme.background) {
    for (let obj of theme.theme.background) {
      // querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素
      const dom = document.querySelector(obj.el)
      // 传入特殊class类增加在哪个节点上和增加的class类名，通过正则去删除添加的class类
      removeClass(dom, obj.className)
    }
  }
}
export default function setUpColor(theme) {
  // 传入定义好的主题配置
  const colors = theme.theme
  // 删除当前主题
  delBackground()
  // 赋值定义好的需要修改的样式
  var styleText = style
  // Object.entries - 把一个对象的键值以数组的形式遍历出来
  // 例：
  // const obj = { foo: 'bar', baz: 'abc' };
  // console.log(Object.entries(obj));  // [['foo', 'bar'], ['baz', 'abc']]
  for (let [k, v] of Object.entries(colors)) {
    // 动态设置主题所对应的特殊class类
    if (k === 'background') {
      setUpBackground(v)
      continue
    }
    // 通过正则匹配把需要修改的样式颜色替换成主题设定的颜色
    /*
      var aaa = `.el-input__inner:focus{
        outline: none;
        border-color: {primaryBtn};
      }.el-textarea__inner:focus {
        outline: none;
        border-color: {primaryBtn};
      }`
      var bbb = 'primaryBtn'
      var ccc = aaa.replace(new RegExp('{' + bbb + '}', 'g'), '#333')
      console.log(bbb)
    */
    styleText = styleText.replace(new RegExp('{' + k + '}', 'g'), v)
  }
  // \n - 换行符  \r - 回车符  匹配删除所有换行，回车符
  styleText = styleText.replace(/\n/g, '').replace(/\r/g, '')
  let styleDom
  styleDom = document.querySelector('#theme')
  if (!styleDom) {
    styleDom = document.createElement('style')
    styleDom.setAttribute('type', 'text/css')
    styleDom.setAttribute('id', 'theme')
  }
  styleDom.innerText = styleText
  document.querySelector('head').appendChild(styleDom)
  setStorageTheme(theme)
}
